<div class="user-info clear-fix">
  <img src="<%= userInfo.picture%>" class="header-img float-left"/>
  <h4 class="user-name"><%= userInfo.nickName%></h4>
</div>

<% if (isMe) { %>
  <%# 是当前登录用户%>
  <p class="bold margin-top-10">
      <a href="/at-me">
          @提到我的 (<%= locals.atCount%>)
      </a>
  </p>
<% } else { %>
  <%# 不是当前登录用户%>
  <p class="margin-top-10">
      <button id="btn-un-follow" class="btn btn-light" style="display: none;">取消关注</button>
      <button id="btn-follow" class="btn btn-primary" style="display: none;">关注</button>
  </p>
<% } %>

<script>
$(function () {
  // 当前用户 id
  var curUserId = <%= userInfo.id%> ;

  // 按钮，显示和隐藏
  var $btnFollow = $('#btn-follow')
  var $btnUnFollow = $('#btn-un-follow')
  if (<%= !isMe%>) {
      // 不是当前用户，则显示“关注”或者“取消关注”
      if (<%= locals.amIFollowed%>) {
          $btnUnFollow.show()
      } else {
          $btnFollow.show()
      }
  }

  // 关注此人
  $btnFollow.click(function () {
      ajax.post('/api/profile/follow', {
          userId: curUserId
      }, function (err) {
          if (err) {
              alert(err)
              return
          }
          // 关注成功
          $btnFollow.hide()
          $btnUnFollow.show()
      })
  })

  // 取消关注
  $btnUnFollow.click(function () {
      if (confirm('确定取消关注？') === false) {
          return
      }
      ajax.post('/api/profile/unFollow', {
          userId: curUserId
      }, function (err) {
          if (err) {
              alert(err)
              return
          }
          // 取消成功
          $btnFollow.show()
          $btnUnFollow.hide()
      })
  })
})
</script>
